<div class="wall-toolbar" [class.mouse-moving]="showHideMenu || menuActive">
	<div class="menu">
		<div class="option" id="search-bar">
			<label class="form-label" for="search" >Search Term</label>
			<input matInput required search autocomplete="off" type="text" id="search" name="search"
				[formControl]="searchInputControl"
				(keyup.enter)="relocateEvent(query)" [(ngModel)]="query"
				name="query">
			<i  class="material-icons md-12">search</i>
		</div>
		<div class="option" id="search">
			<button class="btn" role="button" type="button" tabindex="-1"
				matTooltip="Advanced Search" [matTooltipPosition]="'above'"
				aria-roledescription="Search Options" (click)="showHideCustomization.emit('Search')">
				<i  class="material-icons md-12">search</i>
			</button>
		</div>
		<div class="option" id="feeds-moderation">
			<button class="btn" role="button" type="button" tabindex="-1"
				matTooltip="Moderation" [matTooltipPosition]="'above'"
				aria-roledescription="Feeds Moderation" (click)="showHideCustomization.emit('Moderation')">
				<i  class="material-icons md-12">person_outline</i>
			</button>
		</div>
		<div class="option" id="wall-design">
			<button class="btn" role="button" type="button" tabindex="-1"
				matTooltip="Wall Design" [matTooltipPosition]="'above'"
				aria-roledescription="Wall Design" (click)="showHideCustomization.emit('Design')">
				<i  class="material-icons md-12">web</i>
			</button>
		</div>
		<div class="option" id="color-theming">
			<button class="btn" matMenuTrigger
				role="button" type="button" tabindex="-1"
				matTooltip="Color Themes" [matTooltipPosition]="'above'"
				[matMenuTriggerFor]="themeMenu"
				(onMenuOpen)="menuActive = true"
				(onMenuClose)="menuActive = false"
				aria-roledescription="Color Themes">
				<i  class="material-icons md-12">format_color_fill</i>
			</button>
		</div>
		<div class="option" id="fullscreen">
			<button class="btn" role="button" type="button" tabindex="-1"
				matTooltip="Full Screen" [matTooltipPosition]="'above'"
				aria-roledescription="Enter/Exit Full Screen" toggleFullscreen>
				<i  class="material-icons md-12">fullscreen</i>
			</button>
		</div>
	</div>
</div>
<mat-menu class="docs-theme-picker-menu" overlapTrigger="false" #themeMenu="matMenu" yposition="above">
		<mat-grid-list cols="2">
			<mat-grid-tile *ngFor="let theme of themes">
				<div mat-menu-item (click)="currentTheme = theme; installTheme();">
					<div class="docs-theme-picker-swatch">
						<mat-icon class="docs-theme-chosen-icon" *ngIf="currentTheme === theme">check_circle</mat-icon>
						<div class="docs-theme-picker-primary" [style.background]="theme"></div>
					</div>
				</div>
			</mat-grid-tile>
		</mat-grid-list>
		<button mat-menu-item role="button" type="button" tabindex="-1"
			aria-roledescription="Color Options" (click)="showHideCustomization.emit('Color')">
			<i class="material-icons md-12">color_lens</i>
			<span class="info">Color Options</span>
	</button>
</mat-menu>
